<template>
  <div class="loginIndexMain">
    <PageHeader :lang="lang" :isShowAnnouncement = "false"></PageHeader>
      <!--找回密码页面-->
      <input type="text" name="findPassword" style=" display:none">
      <div class="login_Main ">
        <router-link class="returnPage" to="/user/findPasswordStep1"> {{lang['findPossward return']}} </router-link>
        <h3 class="title findps_itle">{{lang['findPossward enter password']}}</h3>

        <div class="control-box" style="margin-top:30px;">
          <div class="input-wrap password-wrap" :class="{active: (passwordType === 'password') && findPassword}">
             <el-input :type="passwordType" name="" :placeholder="lang['findPossward set password']" maxlength="20" v-model="findPassword"  ref="findPassword"  id="findPassword" clearable></el-input>
             <a class="show_password" @click="showHidePassword" :class="{hide_password: isPassword}" v-show="findPassword"></a>
          </div>
        </div>
 
        <button type="button" class="buttonBox magTopBox" v-bind:class="{disabled: !isDisableBtn || !findPassword}"  @click="submitPassword">{{lang['findPossward set']}}</button>

      </div>
    <div class="errorTip"></div>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'
import ModalApi from '@/components/SwModal/api.js'
import CheckInput from '@/utils/CheckInput.js'
import rules from '@/utils/rules.js'

export default {
  mixins: [commonMixins],
  data () {
    return {
      isPassword: false,
      passwordType: 'password',
      findPassword: '',
      phoneOrEmail: '',
      areaCode: '',
      findVerifyCode: '',
      isDisableBtn: true
    }
  },
  watch: {
    langKey () {

    }
  },
  components: {
  },
  methods: {
    showHidePassword () {
      this.isPassword = !this.isPassword
      this.passwordType = (this.passwordType === 'password') ? 'text' : 'password'
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.submitPassword()
      }
    },
    submitPassword () {
      if (!this.isDisableBtn || !this.findPassword) { return }
      // 新密码、确认密码是否为空
      this.checkHandle.chackByIdsInOrder(['findPassword'])
      .then((info) => {
        let top = $('#' + info.id).offset().top
        let currentInput = $('#' + info.id)
        if (!info.isValid) {
          this.errorTip(top, info.error(), currentInput)
          return
        }
        this.isDisableBtn = false
        this.$http.post('Customer/FindPasswordConfirm', {
          VerifyCode: this.findVerifyCode,
          AreaCode: this.areaCode,
          PhoneOrEmail: this.phoneOrEmail,
          Password: this.findPassword,
          ConfirmPassword: this.findPassword,
          IP: '',
          ClientType: 0, // 0,网页;1,android;2,iOS
          LanguageCode: '',
          WebSiteId: ''
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            ModalApi.message(this.lang['successfully changed'])
            setTimeout(() => {
              this.$router.push({path: '/user/login'})
            }, 3000)
          }
          this.isDisableBtn = true
        })
      })
      .catch((info) => {
      })
    },
    errorTip (top, error, currentInput) {
      $('.errorTip').stop(true,true).css({'top': top -50}).html(error).fadeIn()
      $(currentInput).parent('.el-input').css({"border": "solid 1px #f00"}) // .parents('.input-wrap')
      setTimeout(function () {
        $('.errorTip').fadeOut()
        $(currentInput).parent('.el-input').css({"border": "solid 1px #4E5A84"}) // .parents('.input-wrap')
      }, 2000)
    },
    findPasswordRules () {
      let onchecked = (result) => {
        let top = $('#' + result.id).offset().top
        let currentInput = $('#' + result.id)
        if (!result.isValid && that._.isFunction(result.error)) {
          this.errorTip(top, result.error(), currentInput)
        }
      }
      let that = this
      this.checkHandle = new CheckInput({
        rules: rules,
        trimValue (val, item) {
          return val.replace(/^\s+|\s+$/, '')
        },
        list: [
          {
            id: 'findPassword',
            input: document.getElementById('findPassword'),
            checkOn: ['blur'],
            onchecked,
            rules: [
              {
                rule: 'required',
                error () {
                  that.passwordLevel = 0
                  return that.lang['findPossward set password']
                }
              },
              {
                rule (val) {
                  let isValid = true
                  let level = 0
                  let pwd = val
                  let hasLetter = /[a-zA-Z]/.test(pwd) // 拥有字母
                  let hasUpperLetter = /[A-Z]/.test(pwd) // 拥有大写字母
                  let hasLowerLetter = /[a-z]/.test(pwd) // 拥有小写字母
                  let hasNumber = /\d/.test(pwd) // 拥有数字
                  let hasSymbol = /[^a-zA-Z0-9]/.test(pwd) // 拥有字符
                  let minLength = 8 // 最小8位
                  let groups = 0 // 密码强度 0不通过 1弱 2中 3强

                  // 得到组合种类数量
                  groups = [hasLetter, hasNumber, hasSymbol].filter((v) => v === true).length

                  // 至少是8位和拥有两种组合才通过
                  if (pwd.length >= minLength && groups >= 2) {
                    // 有两种组合为弱
                    if (groups >= 2) level = 1
                    // 有两种组合且同时拥有大小写为中
                    if (groups >= 2 && hasUpperLetter && hasLowerLetter) level = 2
                    // 拥有三种组合为中
                    if (groups >= 3) level = 2
                    // 拥有三种组合且同时拥有大小写为强
                    if (groups >= 3 && hasUpperLetter && hasLowerLetter) level = 3
                  } else {
                    isValid = false
                  }

                  that.passwordLevel = level

                  return isValid
                },
                error () {
                  return that.lang['register_formatCorrectPassword']
                }
              }
            ]
          }
        ]
      })
    }
  },
  mounted () {
    this.findVerifyCode = this.$route.query.verifyCode
    this.areaCode = this.$route.query.areaCode
    this.phoneOrEmail = this.$route.query.phoneOrEmail

    this.findPasswordRules()
  },
  beforeDestroy () {

  }
}
</script>

<style lang="less">

</style>
